<template>
  <div class="home-map-link">
    <div class="title">
      <div style="font-weight: bold">校园网址导航</div>
      <div class="link"></div>
      <div class="map">查看玄武区教育地图</div>
    </div>
    <div class="school-list">
      <div class="list-content">
        <div class="content-title">
          <div class="name" style="color: #409EFF">在线中学</div>
          <img :src="titleIcon1"/>
        </div>
        <div class="map-list">
          <div class="list-item" v-for="item in zx" @click="open(item.titleimg)">
            <div class="point" style="background: #409EFF"></div>
            <div>{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="list-content">
        <div class="content-title">
          <div class="name" style="color: #67C23A">在线小学</div>
          <img :src="titleIcon2"/>
        </div>
        <div class="map-list">
          <div class="list-item" v-for="item in xx" @click="open(item.titleimg)">
            <div class="point" style="background: #67C23A"></div>
            <div>{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="list-content">
        <div class="content-title">
          <div class="name" style="color: #B045DC">在线幼儿园</div>
          <img :src="titleIcon3" style="width: 5em"/>
        </div>
        <div class="map-list">
          <div class="list-item" v-for="item in yey" @click="open(item.titleimg)">
            <div class="point" style="background: #B045DC"></div>
            <div>{{item.title}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleIcon1 from '../../image/index/shool_icon1.png'
import titleIcon2 from '../../image/index/shool_icon2.png'
import titleIcon3 from '../../image/index/shool_icon3.png'
import {getSchools} from '@/api/content'

export default {
  created() {
    getSchools().then(res=>{
      this.yey = res.data[0]
      this.xx = res.data[1]
      this.zx = res.data[2]
    })
  },
  name: "home-map-link",
  data() {
    return {
      yey:[],
      xx:[],
      zx:[],
      titleIcon1,
      titleIcon2,
      titleIcon3,
      dataList: [{
        name: '在线中学',
        icon: titleIcon2,
        color: '#409EFF',
        list: ['南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学',]
      },
        {
          name: '在线小学',
          icon: titleIcon2,
          color: '#67C23A',
          list: ['南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学',]
        },
        {
          name: '在线幼儿园',
          icon: titleIcon3,
          color: '#B045DC',
          list: ['南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学', '南京市人民中学',]
        },]
    }
  },
  methods:{
    open(s){
      window.open(s)
    }
  }
}
</script>

<style lang="scss" src="./index.scss" scoped>

</style>
